import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // 进度条组件(路由切换网页最顶端蓝色进度条)
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title' // 拿到浏览器标题的生成方法

NProgress.configure({ showSpinner: false }) // 进度条最右侧不出现加载小圆圈

const whiteList = ['/login'] // 数组

// 路由全局前置守卫
// 路由守卫概念: 守卫路由跳转的一个函数
// 全局前置路由守卫概念: 任意路由跳转会先执行一个守卫函数, 决定是放行还是中断跳转
// 作用: 可以在跳转页面之前, 进行权限判断做拦截
// 场景: 未登录/已登录, 做页面是否能进入的判断...等等
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  NProgress.start()

  // 设置浏览器标签栏标题
  document.title = getPageTitle(to.meta.title)

  // 获取token值
  const hasToken = getToken()

  if (hasToken) { // 登录了
    if (to.path === '/login') {
      // 登录了, 还想去登录页面, 会被强制切回到首页
      next({ path: '/' })
      NProgress.done()
    } else {
      // 正常来说, 直接next()就够了
      const hasGetUserInfo = store.getters.name
      if (hasGetUserInfo) {
        // 如果有用户信息, 就放行
        next()
      } else {
        // 第一次登录, vuex里没有用户信息, 跳转到首页可能会空白, 进入这里
        try {
          // 去获取用户信息, 保存到vuex中
          await store.dispatch('user/getInfo')
          // 再让路由页面跳转
          next()
        } catch (error) {
          // 如果获取用户信息, 报错了(伪造/过期token), 进这里
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          // 退出登录
          NProgress.done()
        }
      }
    }
  } else { // 未登录
    if (whiteList.indexOf(to.path) !== -1) {
      // 未登录, 想要去的是白名单whiteList数组里记录的路由地址, 则放行
      next()
    } else {
      // 未登录, 你还想去白名单以外的页面
      // 我们的项目内部项目, 你不登录是不能让你去的next()
      // 所以你要被强制打回到登录页面
      // 未遂地址本来要去的路径地址传递给登录页面, 让他登录后可以直接跳转到未遂地址
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

// 全局后置守卫
// 路由跳转完成后, 会执行一次这里回调函数
router.afterEach(() => {
  // 路由跳转页面后, 关闭进度条
  NProgress.done()
})
